<!--申报-->
<template>
	<div class="wrapper-container">
		<div class="my-form-container" style="height:822px">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">申报课题活动</div>
                        <el-form-item  prop="name">
                            <div class="my-form-item-value">
                                <el-select v-model="ruleForm.subActivityId" placeholder="请选择" class="selectWidth" @change="getJD">
                                    <el-option v-for="item in type1" :key="item.subActivityId" :label="item.subActivityName" :value="item.subActivityId"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">填报日期</div>
                        <div class="my-form-item-value">{{ruleForm.fillDate}}</div>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">课题负责人</div>
                        <div class="my-form-item-value">{{ruleForm.name}}</div>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">课题负责人职称</div>
                        <div class="my-form-item-value">{{ruleForm.jszc}}</div>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">部职别</div>
                        <div class="my-form-item-value">{{ruleForm.sszz}}</div>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">课题名称</div>
                        <el-form-item  prop="docno">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.fillSubjectName"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">研究目标</div>
                        <el-form-item  prop="researchObject">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.researchObject"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">研究内容及研究方法</div>
                        <el-form-item  prop="researchContent">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.researchContent"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">预期成果</div>
                        <el-form-item  prop="planResult">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.planResult"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">完成时限</div>
                        <el-form-item  prop="finishDate">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.finishDate"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">项目类别</div>
                        <el-form-item  prop="projectCategory">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.projectCategory"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">课题组成员</div>
                        <el-form-item  prop="subjectMember">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.subjectMember"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item lastOne" style="border:none">
                    <el-col :span="24">
                        <div class="my-form-item-label">备注</div>
                        <el-form-item  prop="remark">
                            <div class="my-form-item-value" style="line-height:88px">
                                <el-input class="inputWidth" v-model="ruleForm.remark" type="textarea" :rows="3"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
		</div>
        <h1 class="title">阶段材料</h1>
        <div class="my-form-container" :style="{'height':ruleForm.fillSubjectStages.length*60+2+'px'}" v-if="ruleForm.fillSubjectStages.length>0">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
                <el-row class="my-form-item" v-for="(item,index) in ruleForm.fillSubjectStages" :key="item.acScsId" :style="{'border':index == ruleForm.fillSubjectStages.length-1?'none':''}">
                    <el-col :span="24">
                        <div class="my-form-item-label label-css">
                            <span :class="{'disabled':index !== 0}">{{item.acScsName}}</span>
                            <span v-if="index ==0" class="small-btn color-yellow" @click="downloadFile(1)">
                                <img src="@/assets/assessment/icon-import-orange.png"> 下载模板
                            </span>
                            <span v-else class="small-btn disabled-btn">
                                <img src="@/assets/assessment/disD.png"> 下载模板
                            </span>
                        </div>
                        <div class="my-form-item-value btnSC" style="position:relative">
                            <span>{{item.attrFileUrl}}</span>
                            <el-upload action="string" :show-file-list="true" accept=".zip" v-if="index ==0"
                                :http-request="(response)=>{upLoadApi(response,index)}"  :on-change="fileInfo">
                                <span class="small-btn color-yellow">
                                    <img src="@/assets/assessment/bk-export.png"> 上传附件
                                </span>
                                <!-- <span>{{fileName}}</span> -->
                            </el-upload>
                            <span v-else class="small-btn disabled-btn">
                                <img src="@/assets/assessment/disU.png"> 上传附件
                            </span>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
		</div>
		<div class="button-group">
			<div class="" @click="save">保存</div>
            <div class="" @click="cancel">取消</div>
		</div>
	</div>
</template>

<script>
import fileDownload from "js-file-download"
import Axios from 'axios'
import {sbSave} from "@/api/teachingTopic";
import {getDataInfo} from "@/api/lineData"
import {sbJDList,sbDetail} from "@/api/teachingTopic";
  export default {
		data(){
		  return {
            fileName:"",
            isClick:true,
            type1:[],
            ruleForm:{
                subActivityId:'',//课题活动编号
                fillDate:'',//填报日期
                name:'',//课题负责人
                jszc:'',//课题负责人职称
                sszz:'',//部职别
                fillSubjectName:'',//课题名称
                researchObject:'',//研究目标
                researchContent:'',//课题内容及研究方法
                planResult:'',//预期成果
                finishDate:'',//完成时限
                projectCategory:'',//项目类别
                subjectMember:'',//课题组成员
                remark:'',//备注
                fillSubjectStages:[]
            },
            rules: {},
          }
		},
        mounted(){
            this.commonApi.getAllActivity().then(res=>{
                this.type1 = res.data
            })
            let current = new Date();
            let y = current.getFullYear() + '-';
            let m = (current.getMonth()+1 < 10 ? '0'+(current.getMonth()+1) : current.getMonth()+1) + '-';
            let d = current.getDate()
            this.ruleForm.fillDate = y + m + d;
            this.getInfo();
        },
        methods: {
            //获取详情
            async getDetail(mes){
                let res = await sbDetail({fillId:this.$route.query.fillId});
                this.ruleForm = {
                    ...res.data,
                    ...mes,
                    subjectLeader:mes.id
                }
                console.log(this.ruleForm)
            },
            //获取填报人信息
            async getInfo(){
                let res = await getDataInfo();
                if(this.$route.query.fillId){
                    this.getDetail(res.data)
                }
                this.ruleForm = {
                    ...this.ruleForm,
                    subjectLeader:res.data.id,
                    ...res.data
                }
            },
            //获得阶段
            async getJD(e){
                let res = await sbJDList({subActivityId:e});
                this.ruleForm.fillSubjectStages = res.data.map(item=>{
                    let mes = {
                        ...item,
                        attrFileUrl:''
                    }
                    return mes
                });
            },
            //保存数据
            async save(){
                let res = await sbSave(this.ruleForm);
                if(res.code == 200){
                    this.$router.push({
                        path:'/teachingTopics/activity/declare'
                    })
                }
            },
            //取消
            cancel(){
                if(this.$route.query.type == 1){
                    this.$router.push({
                        path:'/teachingTopics/activity/declare'
                    })
                }else if(this.$route.query.type == 2){
                    this.$router.push({
                        path:'/teachingTopics/activity/infoList'
                    })
                }else if(this.$route.query.type == 3){
                    this.$router.push({
                        path:'/teachingTopics/activity/historyList'
                    })
                }
            },
            upLoadApi(item,index){
                let formData = new FormData();
                formData.append('file', item.file);
                console.log(item)
                let requestUrl = this.$store.state.studentUrl.baseUrl+'/file/upload'
                Axios.post(requestUrl,formData).then(res => {
                    if(res.data.success){
                        this.ruleForm.fillSubjectStages[index].attrFileUrl = res.data.data.fileUri
                    }
                })
            },
            fileInfo(file){
                if(file.name.indexOf("zip") == -1){
                    this.$message.error('请上传zip文件');
                }
            },
            downloadFile(){
                let params = {
                    stageId:'',
                    subActivityId:'',
                }
                Axios({
                    method: 'get',
                    url: this.$store.state.studentUrl.baseUrl+'/subjectActivity/downloadSubjectActivityStage',
                    params:params,
                    headers: {'Content-Type': 'application/octet-stream' },
                        responseType: 'blob'
                }).then(res => {
                    fileDownload(res.data, '模板.xlsx');
                });
            },
        }
  };
</script>
<style scoped lang="less" scoped>
@import "../../../styles/commonCss.less";
/deep/.el-upload-list {
    position: absolute;
    top: 4px;
    left: 18%;
}
    .el-upload{
        display: block;
    }
    .label-css{
        span:nth-child(1){
            width: 122px;
            text-align: center; 
        };
        span:nth-child(2){margin-left: 0!important;};
        .disabled{
            color: #8A8A8A!important;
        }
    }
    .disabled-btn{
        width: 122px;
        height: 27px;
        background: #F0F0F0;
        border: 1px solid #747474;
        color: #747474;
        cursor: not-allowed;
        margin-left: 82px!important;
    }
    .color-yellow{
        width: 120px;
        background: #FEF1E8;
        border: 1px solid #F86900;
        color: #F86900;
        margin-left: 82px;
        height: 27px;
    }
    .btnSC{display: flex;align-items: center;}
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.inputWidth{width: 388px;}
    .selectWidth{width: 224px;}
    .lastOne{
        border:none;height:100px;
        /deep/.el-form-item__error {
            top:96%;
        }
    }
    .title{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #004CA7;
        margin: 40px auto 10px;
    }
</style>